昨天將 Sass 安裝在全域之後，能夠使用 Sass cli 來進行 SCSS 與 CSS 之間的編譯。

而將 SCSS 編譯成 CSS 這件事情，也有許多種方式可以來做到。

sass --watch

sass --watch input.scss output.css
我看著你！

透過 --watch 的模式，他會一直看著 input.scss，如果這份檔案有所變更，那他就會執行一次編譯的作業，重新產出一份最新版本的 output.css，這樣就不用每次在變更了 input.scss 後還要手動去重新編譯一份 output.css

package.json - scripts

可以將每次要編譯 SCSS 時都會用到的這串語法放到 package.json 中的 script 裏，如此一來只需去啟用對應的 script 就能執行編譯 SCSS 的指令。

// package.json
"scripts": {
    "compile-sass": "sass ./css/input.scss ./css/output.css"
}

往後只要在終端機裡輸入：npm run compile-sass 就可以進行編譯了。
同樣地，要啟用 --watch 的話也可以加入另一個 script：

// package.json
"scripts": {
    "compile-sass": "sass ./css/input.scss ./css/output.css",
    "compile-sass--watch": "sass --watch ./css/input.scss ./css/output.css"
}

在終端機裡輸入：npm run compile-sass--watch 便可開啟 sass 的 --watch 模式。

此時設定的 package.json scripts 可以當作是一種開發的筆記，日後進行專案的維護時，可以從這邊所設定的 scripts 中取得不少開發所需的資訊與線索。

VS code extension

除了用 Sass 官方所提供的 CLI 進行 SCSS 的編譯之外，我們也可以使用 IDE 的 extension 來達到相同的效果。

在這邊我們使用 Live Sass Compiler 來進行 SCSS 的編譯。

相關的設定可以在官方的 github 文件中找到：vscode-live-sass-compiler

打開 VS code 的 seeting.json 後便可照著官方文件所提供的範例進行設定。

如果擔心 setting.json 的設定會影響到不同專案的話，可以個別設定 workspace 的 setting.json，輸入 cmd+shift+p or ctrl+shift+p 選擇：Open sorkspace setting 即可。

設定選項：

• formats
  • format：編譯後的格式
    • "expanded" - 展開
    • "compressed" - 壓縮
  • extensionName：編譯後的檔名
    • ".css"
    • ".min.css"
  • savePath：編譯後檔案的儲存路徑
    • null
    • "./css"
    • "自訂即可"
• excludeList：將特定資料夾、檔案排除在編譯的範圍
• includeItems：僅將特定的 SCSS 檔案列路編譯的範圍中
• autoprefix：替符合篩選標準的瀏覽器加上前綴
  • "> 1%"：每個使用人數 超過 使用者總數 1% 的瀏覽器
  • "< 1%"：每個使用人數 不超過 使用者總數 1% 的瀏覽器
  • "last 2 versions"：每個瀏覽器最新的兩個版本
  • 詳細的設定參數與寫法可參考 Browserslist

// .vscode -> setting.json
{
  "liveSassCompile.settings.formats":[
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": null
    }
  ],
  "liveSassCompile.settings.excludeList": [
    "**/node_modules/**",
    ".vscode/**"
  ],
  "liveSassCompile.settings.includeItems": [
    "path/subpath/a.scss",
    "path/subpath/b.scss",
  ],
  "liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
  ]
}

在設定完成後，按下 cmd + shift + p 選擇 Live Sass: Watch Sass，即可開啟相當於 sass --watch input.scss output.css 效果的編譯環境。

參考

• 蛋頭教室 如何使用 npm script 變成你的建立工具 重點筆記
• vscode-live-sass-compiler
• browserslist